<template>
  <div class="combination">
    <div class="combination-list">
     <span class="span1"> 拼团惠</span>
      <div
        class="combination-list-img"
        v-for="(item) in  listimages"
        :key="item"
      >
        <van-image
          round
          width="1rem"
          height="1rem"
          :src="item"
         
        />
        
      </div>
    <span class="span2">11人参与</span>
    <span class="span3" @click="addGo">Go ></span>
    </div>
    <div class="combination-item">
       <div  v-for="item in images" :key="item.id">
      <img :src="item.image" alt=""  @click="getto(item.id)">
      <p class="title">{{item.otPrice}}</p>
      <p class="price">{{item.price}}</p>
      <p class="otprice">{{item.otPrice}}</p>
    </div>
    </div>
   
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [],
      listimages: []
    }
  },
  methods: {
     addGo(){
       this.$router.push("/pages/activity/goods_combination/index")
    },
    async getcombination() {
      const res = await this.$http.getcombination()
      this.images = res.data.data.productList
      this.listimages = res.data.data.avatarList
      console.log(res.data.data);
    },
    getto(id){
      this.$router.push(`/goods_combination_details/index?id=${id}`)
    }
  },
  created() {
    this.getcombination()
  }
}
</script>
<style lang="scss">
*{
  padding:0;
  margin: 0;
}
.combination {
  width: 100%;
  padding-left: 20px;
  box-sizing: border-box;
  height: 200px;
  overflow: hidden;
  .combination-list {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    .span1{
      margin-right: 10px;
    }
    .span2{
      font-size: 16px;
      color: red;
      margin-left: 10px;
    }
    .span3{
      display: inline-block;
      width: 60px;
      height: 20px;
      
      text-align: center;
      border-radius: 20px;
      background-color: #ffd6a7;
      margin-left: 140px;
      color: #fe960f;
    }
   
  }
  .combination-item {
    height: 190px;
    display: flex;
     overflow: auto hidden;
    font-size: 14px;
    img{
      height: 120px;
    }
    .title{
      width: 140px;
      height: 20px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    text-decoration: line-through;
    }
    .otprice{
      text-decoration: line-through;
      color: #ccc;
    }
    .price{
      color: red;
    }
  }
}
</style>